<template>
  <div>
    <!-- <h1>这里是影院子页面</h1> -->
    <div class="chocies">
      <div class="chose_block">
        <div class="chose_block_item block_city"><span>全城</span><i></i></div>
        <div class="chose_block_item block_branch"><span>品牌</span><i></i></div>
        <div class="chose_block_item block_special"><span>特色</span><i></i></div>
      </div>
    </div>
    <div class="show_cinemas">
        <ul>
          <li v-for="item in cinemas_data" :key="item.id">
            <div class="cinemas_name">
              <span class="cinemas_name_content">{{item.nm}}</span>
              <span class="cinemas_name_price"> <span class="price_content">{{item.sellPrice}}</span> 元起</span>
            </div>
            <div class="cinemas_address">{{item.addr}}</div>
            <div class="icons">
              <span class="set_green" v-if="item.tag.allowRefund">退</span>
              <span class="set_green" v-if="item.tag.endorse">改签</span>
              <span class="set_yellow" v-if="item.tag.snack">小吃</span>
              <span class="set_yellow" v-if="item.tag.vipTag">折扣卡</span>
              <span class="set_green" v-if="item.tag.hallType[0]=='4D厅'">4D厅</span>
              <span class="set_green" v-if="item.tag.hallType[0]=='巨幕厅'">巨幕厅</span>
              <span class="set_green" v-if="item.tag.hallType[0]=='杜比全景声厅'">杜比全景声厅</span>
            </div>
            <div class="count" v-if="item.promotion.cardPromotionTag != '' "> <img style="width:14px;height:14px" src="https://i.maoyan.com/images/dpmmweb/cinemaList/img/base/base64/card.png" alt=""> {{item.promotion.cardPromotionTag}}</div>
          </li>
        </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data(){
    return {
      cinemas_data:[]
    }
  },
  mounted(){
    axios.get(
      'ajax/moreCinemas?movieId=0&day=2022-04-11&offset=0&limit=20&districtId=-1&lineId=-1&hallType=-1&brandId=-1&serviceId=-1&areaId=-1&stationId=-1&item=&updateShowDay=true&reqId=1649660456978&cityId=30&optimus_uuid=2D3487E0B0FB11EC8F63F78A88F7117C67CAF46DEF4444BBAD1040D071E7281B&optimus_risk_level=71&optimus_code=10',
      ).then((res)=>{
        // console.log(res);
        // console.log(res.data);
        if( res && res.status==200 ){
          this.cinemas_data = res.data.cinemas.cinemas
          // console.log(this.cinemas_data);
        }
      })
  }
}
</script>

<style lang="less" scoped>
  .chocies{
    width: 100%;
    height: 40px;
    background-color: #fff;
    .chose_block{
      width: 90%;
      height: 100%;
      // background-color: lightcoral;
      margin: auto;
      display: flex ;
      &_item{
        width: 33.3%;
        height: 98%;
        line-height: 40px;
        border-bottom: 1px solid rgb(240, 240, 240);
        // background-color: lightgreen;
       
        span{
          // display: inline-block;
          width: 100%;
          padding: 0 36%;
          border-right: 1px solid rgb(240, 240, 240);
          font-size: 14px;
          color: rgb(119, 119, 119);
        }
      }
    }
    .block_special{
      span{
        border-right: none;
      }
    }
  }

  .show_cinemas{
    width: 100%;
    background-color: #fff;
 
    ul{
      width: 90%;
      margin: auto;
      list-style: none;
      &::after{
        content:"";
        display:block;
        height: 1.4933rem;
      }
      // background-color: lightgrey;
      li{
        // background-color: lightsalmon;
        text-align: left;
        padding:  .3733rem 0;
        border-bottom: 1px solid rgb(240, 240, 240);
        div{
          margin-bottom: 4px;
          &:last-child{
            margin-bottom: 0;
          }
        }
        .cinemas_name{
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .cinemas_name_content{
          font-size: .4267rem;
        }
        .cinemas_name_price{
          margin-left: 10px;
          color: red;
          .price_content{
            font-size: .48rem;
          }
        }
        .cinemas_address{
          font-size: .3733rem;
          color:rgb(102, 102, 102);
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .count{
          display: flex;
          color: rgb(153, 153, 153);
          align-items: center;
        }
      }
    }
  }
  .set_green{
    color:rgb(88, 157, 175);
    border: 1px solid rgb(88, 157, 175);
    padding: 2px 4px;
    margin-right: 4px;
    border-radius: 2px;
  }
  .set_yellow{
    color:rgb(255, 153, 0);
    border: 1px solid rgb(255, 153, 0);
    padding: 2px 4px;
    border-radius: 2px;
    margin-right: 4px;
  }
  
</style>

